<template>
    <div style="height:100%;width:100%;" class="detail">
        <bar class="bar" @on-back="$router.back()">{{cardId}}
        </bar>
        <div style="background-color: #f7f7f7" class="detail-timePick">
            <span style="margin-left:10px">{{time ? time : '全部'}}</span>
            <i class="iconfont icon-rili detail-timePick-icon" @click="handleTime"></i>
        </div>
        <scroll :total="total" style="height: calc(100% - 90px)" @on-infinite="getData">
            <group class="detail-block">
                <cell-box class="vux-tap-active" v-for="(item, index) in cardFlowListBy" :key="index"
                          @click.native="$router.push({name:'icOnly',query:{type: 2},params: {index: index}})"
                          :is-link="false">
                    <div class="detail-cell-box">
                        <div class="detail-box-left">
                            <div>{{item.cardId + '[' + item.userName + ']'}}</div>
                            <div class="detail-left-time">{{item.createTime}}</div>
                        </div>
                        <div class="detail-box-right" style="line-height:25px">
                            <div class="detail-add" v-if="item.changeType === 1">+{{item.changeAmount}}</div>
                            <div class="detail-rem" v-if="item.changeType === 2">-{{item.changeAmount}}</div>
                        </div>
                    </div>
                </cell-box>
            </group>
        </scroll>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import {mapMutations} from 'vuex'
    import VUEX_NAME from '../../../store/constants.vue'
    import scroll from '../../../components/scroll.vue'

    import {
        Bar,
        Search,
        ScrollablePane
    } from 'muka-ui'
    import {
        Group,
        CellBox,
        Divider,
        InlineLoading
    } from 'vux'

    export default {
        name: 'dataInfo',
        components: {
            Bar,
            Group,
            CellBox,
            Search,
            ScrollablePane,
            Divider,
            InlineLoading,
            scroll
        },
        created: function () {
            this.cardId = this.$route.query.cardId

            this.cCardFlowListBy([])
            this.time = null
            this.getData(1)
        },
        data: function () {
            return {
                cardId: null,

                //下拉分页
                total: 0,
                detail: [],

                //ic卡选择框分页
                icTotal: 0,
                icPageNum: 1,
                icDetail: [],

                time: '',
                showSearch: false,

                color: ['#ffd31c', '#7dde30', '#ff6f43', '#299fbb'],
                num: 0,

                searchText: '',
                label: 'IC卡资金流水信息',
                tankerDetail: [],
                bgFind: {
                    'not-find': false
                }
            }
        },
        mounted: function () {
            this.detail = []
            this.num = 0
        },
        computed: {
            ...mapState([
                VUEX_NAME.cardFlowListBy,
            ]),
        },
        methods: {
            ...mapMutations([
                VUEX_NAME.cCardFlowListBy,
            ]),
            getData: function (pageNum, done) {
                this.$ajax(
                    'card/cardFlowPlus',
                    {
                        pageNum: pageNum,
                        pageSize: 20,
                        month: this.time,
                        cardId: this.cardId
                    },
                    (content) => {
                        this.total = content.totalCount
                        this.cCardFlowListBy(this.cardFlowListBy.concat(content.resultList))
                        if (done) {
                            done()
                        }
                    })
            },

            //选择日期
            handleTime: function () {
                this.$vux.datetime.show({
                    cancelText: '取消',
                    confirmText: '确定',
                    format: 'YYYY-MM',
                    value: this.time,
                    onConfirm: (val) => {
                        this.cCardFlowListBy([])
                        this.time = val
                        this.getData(1)
                    },

                })
            }
        }
    }

</script>

<style lang="less">
    .detail-timePick {
        height: 45px;
        line-height: 45px;
        padding: 0 15px;
        .detail-timePick-icon {
            float: right;
            line-height: 45px;
            font-size: 20px;
        }
    }

    .detail {
        .weui-cells .weui-cell {
            height: 32px;
        }
    }

    .detail-add {
        color: #44b549;
        font-weight: 700;
    }

    .detail-rem {
        color: red;
        font-weight: 700;
    }

</style>
